<template>
	<div class="content">
		<div class="form_login h-600px w-480px">
			<div m-10>
				<h1 class="font-size-40px">欢迎注册</h1>
				<span class="color-#9B9B9B">已有账号？</span>
				<span
					id="login_btn"
					cursor-pointer
					text="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
					@click="handleLogin"
					>登录</span
				>
				<el-form
					ref="formRef"
					:rules="loginRules"
					:model="registryFrom"
					label-width="auto"
					label-position="left"
					mt-4
				>
					<el-form-item label="用户名" prop="username">
						<el-input v-model="registryFrom.username" size="large" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input
							v-model="registryFrom.password"
							size="large"
							type="password"
							show-password
							placeholder="请输入"
						/>
					</el-form-item>
					<el-form-item label="手机号" prop="iphone">
						<el-input v-model="registryFrom.iphone" size="large" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="registryFrom.email" size="large" placeholder="请输入" />
					</el-form-item>
					<el-button @click="handleRegistry" class="registry" type="primary" size="large" :disabled="false"
						>注册</el-button
					>
				</el-form>
			</div>
		</div>
		<login ref="loginRef" />
	</div>
</template>

<script setup lang="ts">
import axios from "axios";
import login from "./components/login.vue";
import type { FormInstance } from "element-plus";

interface IregistryFrom {
	username: string;
	password: string;
	iphone: string;
	email: string;
}

const registryFrom = reactive<IregistryFrom>({
	username: "",
	password: "",
	iphone: "",
	email: "",
});
onMounted(() => {});

/**
 * 处理注册逻辑
 * @returns 无返回值
 */
const formRef = ref<FormInstance>();
const handleRegistry = () => {
	formRef.value?.validate((valid: boolean) => {
		if (valid) {
			axios.post("/dev-api/ai_chat2/user/save", registryFrom).then((res) => {
				console.log(res);
			});
		}
	});
};

const loginRules = computed(() => {
	return {
		username: [
			{
				required: true,
				trigger: "blur",
				message: "login.message.username.required",
			},
		],
		password: [
			{
				required: true,
				trigger: "blur",
				message: "login.message.password.required",
			},
			{
				min: 6,
				message: "login.message.password.min",
				trigger: "change",
			},
		],
		iphone: [
			{
				required: true,
				trigger: "blur",
				message: "login.message.iphone.required",
			},
		],
		email: [
			{
				required: true,
				trigger: "blur",
				message: "login.message.email.required",
			},
		],
	};
});

const loginRef = ref<any>();
/**
 * 处理登录逻辑`
 * @returns 无返回值
 */

const handleLogin = () => {
	loginRef.value.dialogVisible = true;
};
</script>

<style scoped lang="scss">
.content {
	position: fixed;
	inset: 0;
	background: url("../../assets/images/reg_bg_min.jpg") no-repeat center / cover;
	background-size: cover;
	.form_login {
		position: absolute;
		top: 50%;
		right: 139px;
		background-color: #ffffff;
		border-radius: 10px;
		transform: translateY(-50%);
	}
	.registry {
		width: 400px;
		height: 50px;
		border-radius: 25px;
	}
	.el-button.is-disabled {
		background: #bdcefc;
		border: none;
	}
}
</style>
